import { useEffect, useRef, useState } from "react";
import "./App.scss";
import avatar from "./images/bozai.png";
// 导入lodash
import _ from "lodash";
// 导入 classNames
import classNames from "classnames";
// 导入 uuid 用于生成唯一的id
import { v4 as uuidv4 } from "uuid";
// 导入 dayjs 用于格式化日期
import dayjs from "dayjs";
// 导入 axios
import axios from "axios";

// 评论列表数据
/* const list = [
  {
    // 评论id
    rpid: 3,
    // 用户信息
    user: {
      uid: "13258165",
      avatar: "",
      uname: "周杰伦",
    },
    // 评论内容
    content: "哎哟，不错哦",
    // 评论时间
    ctime: "2023-10-18 08:15",
    like: 77,
  },
  {
    rpid: 2,
    user: {
      uid: "36080105",
      avatar: "",
      uname: "许嵩",
    },
    content: "我寻你千百度 日出到迟暮",
    ctime: "2023-11-13 11:29",
    like: 88,
  },
  {
    rpid: 1,
    user: {
      uid: "30009257",
      avatar,
      uname: "黑马前端",
    },
    content: "学前端就来黑马",
    ctime: "2023-10-19 09:00",
    like: 66,
  },
]; */
// 当前登录用户信息
const user = {
  // 用户id
  uid: "30009257",
  // 用户头像
  avatar,
  // 用户昵称
  uname: "黑马前端",
};
// 导航 Tab 数组
const tabs = [
  { type: "hot", text: "最热" },
  { type: "time", text: "最新" },
];

// 自定义 Hook(获取评论列表数据)
function useGetList() {
  // 评论列表
  const [commentList, setCommentList] = useState([]);
  // 组件渲染完毕获取评论列表数据
  useEffect(() => {
    // 发请求获取评论列表数据
    const getList = async () => {
      const result = await axios.get("http://localhost:3001/list");
      setCommentList(_.orderBy(result.data, "like", "desc"));
    };
    getList();
  }, []);
  return {
    commentList,
    setCommentList,
  };
}

// 封装 Item 组件
function Item({ item, onDeleteComm }) {
  return (
    <>
      <div className="reply-item">
        {/* 头像 */}
        <div className="root-reply-avatar">
          <div className="bili-avatar">
            <img src={item.user.avatar} className="bili-avatar-img" alt="" />
          </div>
        </div>
        <div className="content-wrap">
          {/* 用户名 */}
          <div className="user-info">
            <div className="user-name">{item.user.uname}</div>
          </div>
          {/* 评论内容 */}
          <div className="root-reply">
            <span className="reply-content">{item.content}</span>
            <div className="reply-info">
              {/* 评论时间 */}
              <span className="reply-time">{item.ctime}</span>
              {/* 评论数量 */}
              <span className="reply-like">点赞数:{item.like}</span>
              {/* 条件 user.uid === item.user.uid */}
              {user.uid === item.user.uid && (
                <span
                  onClick={() => onDeleteComm(item.rpid)}
                  className="delete-btn"
                >
                  删除
                </span>
              )}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

const App = () => {
  // 使用 useState 维护数据(初始时对其进行排序)
  /* const [commentList, setCommentList] = useState(
    _.orderBy(list, "like", "desc")
  ); */
  // 获取Hook中的状态
  const { commentList, setCommentList } = useGetList();
  // 当前激活的tab的type
  const [activeTabType, setActiveTabType] = useState(tabs[0].type);
  // 评论内容
  const [content, setContent] = useState("");
  // 评论框的ref
  const textAreaRef = useRef(null);

  // 删除评论按钮的事件回调
  const onDeleteComm = (rId) => {
    // 更新commentList中的数据  filter方法返回一个新数组
    setCommentList(commentList.filter((item) => item.rpid !== rId));
  };
  // 点击切换tab的事件回调
  const onChangeTab = (type) => {
    // 更新当前激活tab的type值
    setActiveTabType(type);
    // 对评论列表数据进行排序 lodash
    if (type === "hot") {
      // 使用sort函数排序
      // setCommentList(commentList.sort((a, b) => b.like - a.like));
      // 使用 lodash提供的orderBy方法进行排序
      setCommentList(_.orderBy(commentList, ["like"], ["desc"]));
    } else {
      // 使用sort函数排序
      /* setCommentList(
        commentList.sort((a, b) => new Date(b.ctime) - new Date(a.ctime))
      ); */
      // 使用 lodash提供的orderBy方法进行排序
      setCommentList(_.orderBy(commentList, ["ctime"], ["desc"]));
    }
  };
  // 点击发表评论按钮的事件回调
  const onPublishComment = () => {
    // 将 textarea中的内容添加到评论列表中
    setCommentList([
      ...commentList,
      {
        rpid: uuidv4(), // 使用uuid第三方库
        user,
        content: content,
        ctime: dayjs(new Date()).format("YY-MM-DD hh:mm"), // 使用 dayjs格式化日期
        like: 0,
      },
    ]);
    // 清空输入框中的数据
    setContent("");
    // 获取焦点
    textAreaRef.current.focus();
  };

  return (
    <div className="app">
      {/* 导航 Tab */}
      <div className="reply-navigation">
        <ul className="nav-bar">
          <li className="nav-title">
            <span className="nav-title-text">评论</span>
            {/* 评论数量 */}
            <span className="total-reply">{10}</span>
          </li>
          <li className="nav-sort">
            {/* 遍历生成tab */}
            {/* 高亮类名: active */}
            {tabs.map((item) => (
              <span
                className={classNames("nav-item", {
                  active: activeTabType === item.type,
                })}
                key={item.type}
                onClick={() => onChangeTab(item.type)}
              >
                {item.text}
              </span>
            ))}
          </li>
        </ul>
      </div>
      <div className="reply-wrap">
        {/* 发表评论 */}
        <div className="box-normal">
          {/* 当前用户头像 */}
          <div className="reply-box-avatar">
            <div className="bili-avatar">
              <img className="bili-avatar-img" src={avatar} alt="用户头像" />
            </div>
          </div>
          <div className="reply-box-wrap">
            {/* 评论框 */}
            <textarea
              className="reply-box-textarea"
              placeholder="发一条友善的评论"
              value={content}
              onChange={(e) => setContent(e.target.value)}
              ref={textAreaRef}
            />
            {/* 发布按钮 */}
            <div className="reply-box-send">
              <div className="send-text" onClick={onPublishComment}>
                发布
              </div>
            </div>
          </div>
        </div>
        {/* 评论列表 */}
        <div className="reply-list">
          {/* 评论项 */}
          {commentList.map((item) => (
            <Item item={item} key={item.rpid} onDeleteComm={onDeleteComm} />
          ))}
        </div>
      </div>
    </div>
  );
};

export default App;
